// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React from 'react';
import ReactFlow, { Handle } from 'reactflow';
import 'reactflow/dist/style.css';

// 仅输出节点（类型A：一个输出）
const OutputNode = ({ data }) => {
  return (
    <div style={{ background: data.color, padding: 10, borderRadius: 5 }}>
      {data.label}
      <Handle type="source" position="right" id="right" />
    </div>
  );
};

// 输入输出节点（类型B：一个输入和一个输出）
const InputOutputNode = ({ data }) => {
  return (
    <div style={{ background: data.color, padding: 10, borderRadius: 5 }}>
      {data.label}
      <Handle type="target" position="left" id="left" />
      <Handle type="source" position="right" id="right" />
    </div>
  );
};

// 仅输入节点（类型C：一个输入）
const InputNode = ({ data }) => {
  return (
    <div style={{ background: data.color, padding: 10, borderRadius: 5 }}>
      {data.label}
      <Handle
        type="target"
        position="top"
        id="top"
        style={{ left: '50%', transform: 'translateX(-50%)' }}
      />
    </div>
  );
};

const nodeTypes = {
  outputNode: OutputNode,
  ioNode: InputOutputNode,
  inputNode: InputNode,
};

export default function App() {
  const initialNodes = [
    {
      id: '1',
      type: 'outputNode',
      position: { x: 0, y: 0 },
      data: { label: '输出节点', color: '#ffcccb' }
    },
    {
      id: '2',
      type: 'ioNode',
      position: { x: 200, y: 0 },
      data: { label: '中间节点', color: '#90EE90' }
    },
    {
      id: '3',
      type: 'inputNode',
      position: { x: 400, y: 0 },
      data: { label: '输入节点', color: '#87CEEB' }
    }
  ];

  const initialEdges = [
    {
      id: 'e1-2',
      source: '1',
      target: '2',
      sourceHandle: 'right',
      targetHandle: 'left'
    },
    {
      id: 'e2-3',
      source: '2',
      target: '3',
      sourceHandle: 'right',
      targetHandle: 'top'
    }
  ];

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        nodeTypes={nodeTypes}
        fitView
      />
    </div>
  );
}